<template>
  <div style="background: white">
    <!-- 工具栏容器 -->
    <div id="toolbar-container"></div>
    <!-- 编辑器容器 -->
    <div id="editor" style="height: 500px;max-height: 400px;color: #000;"></div>

    <div style="width: 98%;height: 60px;" v-if="!isRead">
      <el-button @click="saveFwb" style="float: right;margin: 20px 10px">提交</el-button>
    </div>
  </div>
</template>

<script>
  import CKEditor from '@ckeditor/ckeditor5-build-decoupled-document';
  import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn'
  import {http} from '../../assets/commonjs/axios';

  export default {
    data() {
      return {
        editor:null,//编辑器实例
        id:'',
        fdaId:'',
        content:'',
        isReadOnly:false,
        isRead:false,
      }
    },
    mounted() {
      if(sessionStorage.itId != 'null'){
        this.getFwb(_=>{
          this.initCKEditor()
        })
      }else{
        this.initCKEditor()
      }


    },
    methods: {
      initCKEditor() {
        let _this = this
        CKEditor.create(document.querySelector('#editor'), {
          language: 'zh-cn',
        }).then(editor => {
          const toolbarContainer = document.querySelector('#toolbar-container');
          toolbarContainer.appendChild(editor.ui.view.toolbar.element);
          this.editor = editor //将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
          editor.setData(_this.content || '');
          editor.isReadOnly = this.isRead
        }).catch(error => {
          console.error(error);
        });
      },

      //保存富文本事件 this.text
      saveFwb() {
        let _this = this;
        this.$confirm('是否保存富文本', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          http("post", "directory/save_infoText", {
            text: {
              id: sessionStorage.itId,
              content: this.editor.getData(),
              fdaId: sessionStorage.fdaId
            }
          }).then(function (res) {
            if (res.data.success) {
              _this.$message({message: res.data.message, type: 'success'});
              _this.$emit('closeEvent')
            }
          }).catch(err => {
            console.log("err", err);
          })

        }).catch(() => {
        });
      },
      //获取富文本
      getFwb(callback){
        http('post','directory/get_infoText',{
          id:sessionStorage.itId
        }).then(res=>{
          this.content = res.data.result.content
          if(sessionStorage.itEdit ==1){
            this.isRead = false
          }else if(sessionStorage.itEdit ==0){
            this.isRead = true
          }
          callback();
        })
      },
    }
  }
</script>
